<template>
  <div>
    <nav-bar title="搜索结果" />
    <!-- 文章列表 -->
    <van-loading
      v-if="loding"
      size="24px"
      vertical
    >
      加载中...
    </van-loading>
    <van-empty
      v-else-if="!searchResult"
      image="error"
      description="请求错误"
    />
    <van-empty
      v-else-if="!searchResult.length"
      description="暂无数据"
    />
    <article-list
      v-else
      :data="searchResult"
    />
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';

export default {
  name: 'SearchResult',
  data() {
    return {
      loding: true,
    }
  },
  computed: {
    ...mapState('search', [
      'searchResult',
    ]),
  },
  methods: {
    ...mapActions('search', [
      'updateSearchResult',
    ]),
    ...mapMutations('search', [
      'SET_SEARCH_RESULT',
    ]),
  },
  async created() {
    // // 路由实例
    // console.log(this.$router);
    // // 当前路由信息
    // console.log(this.$route.query.q);
    this.loding = true;
    await this.updateSearchResult(this.$route.query.q);
    this.loding = false;
  },
  beforeDestroy() {
    this.SET_SEARCH_RESULT([]);
  },
}
</script>

<style>
.dataNull {
  text-align: center;
  line-height: 400px;
  color: #999;
}
</style>
